<template>
  <div class="dashboard-container">
    <el-form label-width="80px" :model="teacher">
      <el-form-item label="姓名" style="width: 16%">
        <el-input v-model="teacher.name" clearable></el-input>
      </el-form-item>

      <el-form-item label="讲师职级" style="width: 16%">
        <el-select placeholder="高级讲师" v-model="teacher.level">
          <el-option label="高级讲师" :value="2"></el-option>
          <el-option label="首席讲师" :value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="讲师排序" style="width: 8%">
        <el-input v-model="teacher.sort" clearable></el-input>
      </el-form-item>
      <el-form-item label="资历" style="width: 46%">
        <el-input
          v-model="teacher.career"
          clearable
          type="textarea"
          class="textArea"
        ></el-input>
      </el-form-item>

      <el-form-item label="简介" style="width: 46%">
        <el-input
          v-model="teacher.intro"
          clearable
          type="textarea"
          style="min-height: 133px"
        ></el-input>
      </el-form-item>
      <!-- 图片上传 -->
      <el-form-item label="頭像">
        <el-upload
          action="http://localhost:8080//eduservice/teacher/uploadAvatar"
          list-type="picture-card"
          :on-success="uploadAvatar"
          :on-remove="handleRemove"
          :on-preview="handlePictureCardPreview"
          :file-list="fileList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="teacher.avatar" />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import teacherApi from "@/api/teacher";
export default {
  data() {
    return {
      teacher: {
        id: null,
        name: "",
        level: "",
        career: "",
        intro: "",
        sort: "",
        avatar: "",
      },
      dialogVisible: false,
      fileList: [],
      row: 0,
    };
  },
  created() {
    this.init();
  },
  watch: {
    $route(to, from) {
      this.init();
    },
  },
  methods: {
    init() {
      //判断url地址上面有没有参数
      if (this.$route.params && this.$route.params.id) {
        this.teacher.id = this.$route.params.id;
        this.getTeacher(this.teacher.id);
      } else {
        //添加讲师页面url地址上面没有参数所以不会走if
        this.teacher = {};
        this.fileList = [];
      }
    },
    save() {
      //代表你是添加讲师
      if (this.teacher.id == null) {
        this.addTeacher(this.teacher);
      } else {
        this.updateTeacher(this.teacher);
      }
    },
    handleRemove(file, fileList) {
      this.dialogVisible = false;
      this.teacher.avatar = "";
    },
    uploadAvatar(res, file, fileList) {
      this.teacher.avatar = res.data.imagePath;
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
    },
    addTeacher(teacher) {
      teacherApi
        .addTeacher(teacher)
        .then((res) => {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.$router.push("/teacher/showTeacher");
        })
        .catch((err) => {
          this.$message({
            type: "success",
            message: "添加失败!",
          });
        });
    },
    getTeacher(id) {
      teacherApi
        .findTeacherByID(id)
        .then((res) => {
          this.teacher = res.data.teacher;
          this.fileList = [{ name: "xxx", url: this.teacher.avatar }];
        })
        .catch((err) => {});
    },
    updateTeacher(teacher) {
      teacherApi
        .updateTeacherById(teacher)
        .then((res) => {
          console.log(res.data);
          this.row = res.data.count;
          if (this.row == 1) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.$router.push("/teacher/showTeacher");
          } else {
            this.$message({
              type: "success",
              message: "修改失败!",
            });
          }
        })
        .catch((err) => {});
    },
  },
};
</script>


<style>
.el-textarea__inner {
  height: 133px;
}
</style>